<template>
  <a-card :bordered="false">
    <h3>海报配置</h3>
    <PosterFilter ref="filter" @onAdd="handleAddOrEdit" @onSearch="onSearch"></PosterFilter>
    <s-table ref="table" size="default" :rowKey="record => record.actId" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1300 }">
      <span slot="image" slot-scope="text, record">
        <img class="image" :src="record.poster.posterUrl" alt="">
      </span>
      <span slot="link" slot-scope="text, record">
        {{record.poster.posterRedirectUrl}}
      </span>
      <span slot="status" slot-scope="text, record">
        <span v-if="record.status == 'Y'">已上架</span>
        <span v-if="record.status == 'N'">已下架</span>
      </span>
      <span slot="employeeBase" slot-scope="text, record">
        {{record.employeeBase.empName}}
      </span>
      
      <span slot="storeList" slot-scope="text, record">
        {{record.storeList.slice(0, 3).map(e => e.storeName).join('，')}}
        <span style="cursor: pointer;" v-if="record.storeList.length > 3" @click="showStoreList(record.storeList)">...查看全部</span>
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="handleAddOrEdit(record.poster.posterId)">编辑</a>
        <a-divider type="vertical" />
        <a @click="handleEdit(record.actId, 'Y')" v-if="record.status == 'N'">上架</a>
        <a @click="handleEdit(record.actId, 'N')" v-if="record.status == 'Y'">下架</a>
      </span>
    </s-table>
    <StoreListModal :visible.sync="visible" :storeList="storeList"></StoreListModal>  
  </a-card>
</template>
<script>
import { posterConfigList, configEdit } from '@/api/pos/posterConfiguration'
import { STable } from '@/views/box/components'
import PosterFilter from '../components/PosterFilter'
import StoreListModal from '../components/StoreListModal'
const columns = [
  {
    title: '序号',
    width: '60px',
    align: 'center',
    customRender: (text, record, index) => `${index + 1}`
  },
  {
    title: '活动名称',
    width: '200px',
    align: 'center',
    dataIndex: 'name'
  },
  {
    title: '活动海报',
    width: '180px',
    align: 'center',
    scopedSlots: { customRender: 'image' }
  },
  {
    title: '跳转链接',
    width: '180px',
    align: 'center',
    scopedSlots: { customRender: 'link' }
  },
  {
    title: '参与店铺',
    width: '280px',
    align: 'center',
    scopedSlots: { customRender: 'storeList' }
  },
  {
    title: '状态',
    width: '120px',
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '创建人',
    width: '120px',
    align: 'center',
    scopedSlots: { customRender: 'employeeBase' }
  },
  {
    title: '创建时间',
    width: '120px',
    align: 'center',
    dataIndex: 'createDate'
  },
  {
    title: '操作',
    width: '150px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    PosterFilter,
    STable,
    StoreListModal
  },
  data() {
    return {
      visible: false,
      storeList: [],
      columns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      queryParam: {},

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        if (this.requestFlag()) return
        const data = {
          ...this.queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize
        }
        return posterConfigList(data).then(res => {
          if (res.code === 200) {
            const { records, total, size, current } = res.data
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }
            return data
          } else {
            this.$message.error(res.msg || res.message)
            const data = {
              page: {
                count: 0,
                pageNo: 0,
                pages: 0
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {
    
  },
  computed: {},
  mounted() {},
  watch: {
    $route(to, from) {
      const whiteList = [
        '/pos+/activityConfiguration/posterConfiguration/addAndEdit/'
      ]
      const currentPathBase = '/pos+/activityConfiguration/posterConfiguration/posterList'
      const currentPath = this.$route.path
      if (this.checkRoute(from.path, whiteList) && to.path.includes(currentPathBase)) {
        this.$refs.table.refresh() // 刷新当前列表（记录上次页码）
      } else {
        if (currentPath.includes(currentPathBase)) {
          this.$refs.table.refresh(true)
        }
      }
    }
  },
  methods: {
    requestFlag() {
      const currentPathBase = '/pos+/activityConfiguration/posterConfiguration/posterList'
      const currentPath = this.$route.path
      if (!currentPath.includes(currentPathBase)) return true
      return false
    },

    // 显示全部门店
    showStoreList(storeList) {
      this.storeList = storeList
      this.visible = true
    },

    // 新增/编辑
    handleAddOrEdit(v) {
      this.$router.push(`/pos+/activityConfiguration/posterConfiguration/addAndEdit/${v}`)
    },

    
    // 上下架
    handleEdit(actId, status){
      const data = {
        actId,
        status
      }
      configEdit(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },


    checkRoute(fromPath, routeArr) {
      for (let i = 0; i < routeArr.length; i++) {
        if (fromPath.includes(routeArr[i])) {
          return true
        }
      }
      return false
    },

    //查询
    onSearch(obj) {
      this.queryParam = obj
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-tabs-bar {
  margin-bottom: 0;
  cursor: pointer;
}

.image {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 60px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
}

.remarks {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  word-break: break-all; /* 追加这一行代码 */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
</style>
